<template>
  <div>
<el-tree :data="data"
 :props="defaultProps" 
 default-expand-all 


 >
 
  <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
       
        <span>
          <el-button
            type="text"
            size="mini"
           >
            {{data.manager}}
          </el-button>
           <el-dropdown>
          <el-button
            type="text"
            size="mini"
          
            >
            操作
          </el-button>
        <el-dropdown-menu slot="dropdown">
        <el-dropdown-item  @click.native="addshow(data)" >
      
         添加子部门
         </el-dropdown-item>
       <el-dropdown-item>
      
        编辑部门
       </el-dropdown-item>
       <el-dropdown-item @click.native="Editshow(data)">
       删除部门
       </el-dropdown-item>
  
  </el-dropdown-menu>

          </el-dropdown>
        </span>
      </span>
 </el-tree>
<!-- 添加对话框 -->
<Dialog
   @cnacel='addcnacel'
   @confirm='addconfirm'
   :searchData="authgroupForm"
   :searchForm="searchForm"
   :show.sync="adddialogVisible"
    title='添加权限'
    
   ></Dialog>
  </div>
</template>

<script>
<<<<<<< HEAD
import {department,Adddepartment} from '@/api/http'
import arrayToTree from "array-to-tree";
=======
import {department,Adddepartment,Deldepartment} from '@/api/http'
import arrayToTree from "array-to-tree";
import Dialog from '@/components/global/Dialog'
>>>>>>> limit
 export default {
  components:{Dialog},
    data() {
      return {
         data: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        addForm:{
          code:'',
          introduce:'',
          manager:"",
          name:'',
          pid:'',

        },
        adddialogVisible:false,
        authgroupForm: {
          code:'',
          introduce:'',
          manager:"",
          name:'',
          pid:'',
      
        },
        searchForm: [
        {
          type: "Input",
          label: "部门名称",
          prop: "name",
          width: "120px",
          // disabled: true,
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "部门编码",
          prop: "code",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "部门负责人",
          prop: "manager",
          width: "120px",
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "部门介绍",
          prop: "introduce",
          width: "120px",
          isFormItemShow: true
        },
        // 部门介绍
        
       
      ],

      }
     
    },
    methods: {
    
   async   getdepartment(){
        const {data:res} = await department()
        console.log(res.data.depts)
       this.data =  res.data.depts
       this.data =  arrayToTree(this.data, {
      parentProperty: "pid",
      customID: "id",
      childrenProperty: "children",
    });
    console.log(this.data)
    
    
     
      },
<<<<<<< HEAD

=======
>>>>>>> limit

 // 关闭添加弹框
 addcnacel(){
        this.adddialogVisible = false
        console.log('EditdialogVisible')
      },
      addshow(dropdown){
        console.log(dropdown)
        this.authgroupForm.pid = dropdown.id 
        this.adddialogVisible = true
        

      },
      // 添加确认按钮
     async addconfirm(){
   
  
      const {data :res} = await Adddepartment (this.authgroupForm)
      // ordersForm 为表单绑定的:model值， 'address'的绑定input名称，第三项为值
     
      console.log('addconfirm',res)
      if(res.code ===10000){
      this.$message.success(res.message)
      this.adddialogVisible = false
      this.getdepartment()
    }
    else{
      this.$message.error(res.message)
    }

      
      },

   add(){
    console.log('add')
    // console.log(node, data)
    this.adddialogVisible = true

   },
// Editshow(data)
    },
created() {
   this.getdepartment()
   
},
  };
</script>

<style lang="less" scoped>


.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
   
    .el-button{
    color: #333;
    font-size: 14px;
    }
  }

</style>